Page({
  data: {
    classes: [] as string[],
    radio: "",
    styleObj: {
      "font-size": "24rpx",
      color: "gray",
    } as ICommon,
    style: "",
    size: "",
    num: 0,
    move: "",
    animation: null, // 给组件的animation属性使用的
  }, // data里面声明的数据只能通过this.setData({})进行赋值操作，因为setData具备渲染更新组件的功能。具备响应式。
  animationObj: {} as WechatMiniprogram.Animation, // data的外面也可以声明变量，通过this.animationObj进行赋值和取值的操作，这里保存的数据一般都是不需要在页面中展示的数据，不需要它具备响应式功能。
  startAni() {
    this.setData({
      move: "ani-start",
    });
  },
  app: {} as ICommon,
  onLoad() {
    this.app = getApp<IAppOption>();
    console.log("====", this.app.globalData.gName);
    this.initStyle();
    // 1. 创建动画实例对象
    this.animationObj = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease-in-out",
    });
    // 2. 给动画实例绑定动画效果
    // this.animationObj.translateX(400).rotate(180).scale(1.5).step();
    this.animationObj
      .translateX(200)
      .step()
      .rotate(180)
      .step()
      .scale(1.5)
      .step();

    // // 3. 将动画实例暴漏给组件的animation属性
    // this.setData({
    //   animation: this.animationObj.export(),
    // });
  },
  onShow() {
    if (typeof this.getTabBar === "function" && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1,
      });
    }
  },
  startMove() {
    // 3. 将动画实例暴漏给组件的animation属性
    this.setData({
      animation: this.animationObj.export(),
    });
  },
  initStyle() {
    let str = "";
    for (const key in this.data.styleObj) {
      str += `${key}:${this.data.styleObj[key]};`;
    }
    this.setData({
      style: str,
    });
  },
  goList(e: any) {
    console.log("---", e.target.dataset);
  },
  goListTwo(e: any) {
    console.log("===", e.target.dataset);
  },
  checkboxEvent(e: IEvent) {
    this.setData({
      classes: e.detail.value,
    });
  },
  radioEvent(e: IEvent) {
    this.setData({
      radio: e.detail.value,
    });
  },
  setfontsize(e: IEvent) {
    const size = e.detail.value;
    const sobj = this.data.styleObj;
    sobj["font-size"] = `${size}rpx`;
    this.setData({
      styleObj: sobj,
    });
    this.initStyle();
  },
  getfontsize(e: IEvent) {
    console.log("----", e.detail.value);
  },
});
